<template>
  <div class="publicBox" id="terminalCss">
  <div class="boxItem " id="publicSearch">

<el-form ref="form" :inline="true"  class="demo-form-inline">
    <el-row>
        <el-form-item label="设备编码">
            <el-input class="pubIptL" v-model="ruleForm.no"  placeholder="请输入设备编码"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
            <el-input class="pubIpt" v-model="ruleForm.brand"  placeholder="请输入设备品牌"></el-input>
        </el-form-item>
        <el-form-item label="型号">
            <el-input class="pubIpt" v-model="ruleForm.model"  placeholder="请输入设备型号"></el-input>
        </el-form-item>
        <el-form-item label="SN">
            <el-input class="pubIpt" v-model="ruleForm.sn"  placeholder="请输入设备SN号"></el-input>
        </el-form-item>
    </el-row>
    <el-row class="row_item">
        <el-form-item label="所在仓库">
            <el-select v-model="ruleForm.warehouseType" filterable  placeholder="全部" class="pubSlt97">
                <el-option
                v-for="item in $warehouse()"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="当前状态" class="item_from">
            <el-select v-model="ruleForm.status" filterable  placeholder="全部" class="pubSlt97">
                <el-option
                v-for="item in $currentStatus()"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="设备类型">
            <el-select v-model="ruleForm.typeId" filterable  placeholder="全部" class="pubSlt">
              <el-option
                v-for="item in deviceTyp"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item class="item_btn">
                    <el-button class="pubBtnBlue" @click="init" type="primary">查询</el-button>
                    <el-button class="pubBtnBlue" @click="exportFn" type="primary">导出</el-button>
        </el-form-item>
    </el-row>

    <el-row>
        <el-form-item >
              <el-button class="pubBtnGree140" @click="goNewbuild" type="primary">设备上线</el-button>
        </el-form-item>
    </el-row>
</el-form>
          </div>
          <public-table class="colum" 
          @changePage="changePage" 
          @handleEdit="handleEdit" 
          :columnDefs="columnDefs" 
          :tableData="tableData" 
          :btn="['edit']"
          :order=true></public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import * as API from "@api/equipmenter.js"
import * as pubAPI from '@api/public.js'

export default {
  components: {
         publicTable
  },
  data() {
    return {
        columnDefs :[
            {headerName: '品牌', field: 'brandname',width:70},
            {headerName: '设备名称', field: 'name',width:100},
            {headerName: '设备类型', field: 'typename',width:120},
            {headerName: 'SN', field: 'sn',width:180},
            {headerName: '供应商ID', field: 'supplierno',width:80},
            {headerName: '绑定通讯模块IMEI', field: 'imei',width:160},
            {headerName: '绑定设备编码', field: 'deviceno',width:148},
            {headerName: '所在仓库', field: 'warehousetypename',width:80},
            {headerName: '所在门店', field: 'storename',width:80},
            {headerName: '状态', field: 'statusname',width:80}
        ],
        tableData: [],
        deviceTyp:[],
        ruleForm:{
           page:1,
           size:100,
           isbinding:1,   //  0  就是库存管理的  1  就是绑定了终端
           model:"",
           brand:"",
           no:"",
           sn:"",
           typeId:null,
           status:null,
           warehouseType:null
        },
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    changePage(pageSize,pageNum){
        this.ruleForm.size=pageSize;this.ruleForm.page=pageNum
        this.init()
     },
    handleEdit(row){
          this.$router.push({path:"/platform/equipment/terminalEdit",query:{data:row}})
        },
    goNewbuild(){
      this.$router.push({path:"/platform/equipment/terminalNewbuild"})
    },
    async exportFn(){
       await API.exportTerminal(this.ruleForm).then(res=>{
         pubAPI.creatExcelFn("终端设备管理.xlsx",res)
       })
    },
    async init(){
           await API.getTerminal(this.ruleForm).then(res=>{
                this.tableData=res.Data
                // console.log(res.Data)
           })
    }    

  },
  async created() {
      this.deviceTyp = await this.$getDeviceType(2)
      this.init()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
@import "../../styles/less/public.less";
  #terminalCss{
    .boxItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .demo-form-inline{
        align-items: center;
      }
      .itemp{
      font-size: 16px;
      } 
      // .row_item{
      //     margin-top: 8px;
      // }
    } 
    .item_from{
        margin: 0 130px;
    }
    .item_btn{
        margin-left: 49px;
    }
  }
</style>